<template>
	<div class="flex_col">
		<EmplParts class="flex_start_self" :info="ctx.empl" />
		<div class="flex_col card p10 flex_start_self m5">
			<div class="flex_row_center ">
				<label>假期总数:</label>
				<label>{{ allHolidays() }}</label>
			</div>
			<div class="flex_row_center mt5">
				<label>休假总数:</label>
				<label>{{ allLeaves() }}</label>
			</div>
			<div class="flex_row_center mt5">
				<label>可用假期:</label>
				<label>{{ days }}</label>
			</div>
		</div>
		<div class="flex_row mt5 flex_start_self">
			<div class="flex_col flex_start_self card p10 m5" v-if="ctx.holidays.length != 0">
				<label>假期详情</label>
				<HolidayParts v-for="(item, index) in ctx.holidays" :key="index" :holiday="item" />
			</div>
			<div class="flex_col flex_start_self ml5 card p10 m5" v-if="ctx.leaves.length != 0">
				<label>已休详情:</label>
				<LeaveInfoParts v-for="(item, index) in ctx.leaves" :key="index" :info="item" />
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">

import type { EmplInfo2, Holiday, LeaveInfo } from '@/service/api';
import HolidayParts from './HolidayParts.vue';
import LeaveInfoParts from './LeaveInfoParts.vue';
import EmplParts from './EmplParts.vue';

interface Ctx {
	holidays: Holiday[],
	leaves: LeaveInfo[],
	empl: EmplInfo2,
	days: number,
}

const ctx = defineProps<Ctx>();

function allHolidays() {
	let s = 0;
	for (const holiday of ctx.holidays) {
		s += holiday.days;
	}
	return s;
}

function allLeaves() {
	let s = 0;
	for (const leave of ctx.leaves) {
		s += leave.days;
	}
	return s;
}

</script>
